<!-- 评论组件 -->
<template>
  <div class="argue-container">
    <span>评论列表</span>
    <br>
    <br>
    <div class="send-argue" style="">
      <form >
        <a href="#" class="touxian">
          <img src="@/images/icon.jpg" alt style="width:30px;border-radius: 50%;">
        </a>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="textarea"
          id="tarea"
        ></el-input>
        <my-button buttonTitle="评论"></my-button>
      </form>
    </div>
    <div class="arguelist">
      <ul>
        <li style="">
          <a href="#" >
            <img src="@/images/icon.jpg" alt style="width:30px;border-radius: 50%;">
          </a>
          <span>icecc</span>
          <br>
          <span>
            您好，我是杂志摄影专栏编辑支悦艳，
            看了你的作品很不错，我们正在征收稿件，
            有兴趣的话欢迎投稿！微信;18137290401
            电话:15137258882 投稿邮箱:919400382@qq.com
          </span>
          <br>
          <span style="line-height:30px;">1月23日</span>
          
          <img
            src="@/assets/icon1/dianzanw.svg"
            alt="点赞"
            title="点赞"
            style="width:20px;"
            v-if="dianzan"
            @click.prevent="dianzan=false"
          >
          <img
            src="@/assets/icon1/dianzansucc.svg"
            alt="取消点赞"
            title="取消点赞"
            style="width:20px;"
            v-else
            @click.prevent="dianzan=true"
          >
        </li>
      </ul>
      <my-button buttonTitle="加载更多评论"></my-button>
    </div>
  </div>
</template>

<script>
import MyButton from "./myButton.vue";
export default {
  data() {
    return {
      textarea: "",
      dianzan: true,
    };
  },
  components: {
    MyButton
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
.argue-container {
  .send-argue {
      padding-left:35px;  position: relative;
    a{
      position: absolute;
      left: 0;
      top: 3px;
      width: 26px;
      height: 26px;
    }
    #tarea {
      height: 64px;
      padding: 7px 10px 9px 15px;
      font-size: 13px;
      border: 0;
      color: #fff;
    }
  }
  .arguelist{
      padding-left:35px;    position: relative;
      a {
      position: absolute;
      left: 0;
      top: 3px;
      width: 26px;
      height: 26px;
    }
    ul{
         line-style:none;
        padding-inline-start:0px;
         margin-top:20px;
         li{
             img {
                 float:right;
          cursor: pointer;
          transition: all 0.6s;
        }
        img:hover {
          transform: scale(1.4);
        }

         }
    }
  }
}
</style>